<%inherit file="topic_base.html"/>

<%block name="subhead">
% if markup_language == 'markdown':
<link rel="stylesheet" href="${ theme_url('markup/%s.css' % BODY_MARKUP) }" />
<link rel="stylesheet" href="${ theme_url('code/emacs.css') }" />
<link rel="stylesheet" type="text/css" href="${ static_url('markitup/skins/simple/style.css') }" />
<link rel="stylesheet" type="text/css" href="${ static_url('markitup/sets/markdown/style.css') }" />
% endif
</%block>

<%block name="innav">
<li><a href="${ reverse_url('forum:catalog') }?id=${ TOPIC.catalog_id }">${ TOPIC.catalog.name }</a> <span class="divider">/</span></li>
<li>${ TOPIC.name }</li>
</%block>

<%block name="submain">

<div id="topic-view" class="row-fluid">
  <div class="span9 topic-view-sidemain">
    <h1><a href="${ reverse_url('forum:topic:view') }?id=${ TOPIC.id }">${ TOPIC.name }</a></h1>

    %if TOPIC.summary:
    <div class="topic-summary">${ TOPIC.summary }</div>
    %endif

    <div class="topic-body">${ TOPIC.body_html }</div>
    <div class="topic-footer-actions text-right">
      <span class="vote">
        <span class="vote-opt" data-url="${ reverse_url('forum:topic:vote') }?id=${ TOPIC.id }&vote=1"><img src="${ theme_url('img/like.png') }" /></span>
        <span class="like count">${ TOPIC.like }</span>
      </span>
      <span class="vote">
        <span class="vote-opt" data-url="${ reverse_url('forum:topic:vote') }?id=${ TOPIC.id }&vote=-1"><img src="${ theme_url('img/unlike.png') }" /></span>
        <span class="unlike count">${ TOPIC.unlike }</span>
      </span>
      <span class="reply">
        <a class="btn btn-primary" href="#reply-topic"><i class="icon-reply"></i> ${ _("I Want To Say") }</a>
      </span>
    </div>

  </div>

  <div class="span3 topic-view-sidebar">
    <div class="account-logo">
      <div><a href="${ reverse_url('user:view') }?id=${ TOPIC.user_id }"><img class="img-circle" src="${ TOPIC.user.avatar_url }" /></a></div>
      <div><a class="user" href="${ reverse_url('user:view') }?id=${ TOPIC.user_id }">${ TOPIC.user.username }</a></div>
    </div>

    <div class="topic-time-info">
      <div><strong>${ _("Created") }</strong>
        ${ ftime(TOPIC.created) }</div>
      <div><strong>${ _("Updated") }</strong>
        ${ ftime(TOPIC.updated) }</div>
    </div>

    <div class="row-fluid text-center topic-statistics">
      <div class="span3 divider vote">
        <span class="like count">${ TOPIC.like }</span><br>
        <span class="vote-opt" data-url="${ reverse_url('forum:topic:vote') }?id=${ TOPIC.id }&vote=1"><img src="${ theme_url('img/like.png') }" /></span>
      </div>
      <div class="span3 divider vote">
        <span class="unlike count">${ TOPIC.unlike }</span><br>
        <span class="vote-opt" data-url="${ reverse_url('forum:topic:vote') }?id=${ TOPIC.id }&vote=-1"><img src="${ theme_url('img/unlike.png') }" /></span>
      </div>
      <div class="span3 post-count divider"><span class="count">${ len(TOPIC.posts) }</span><br>
        <a href="#reply-topic"><i class="icon-reply"></i> ${ _("Reply") }</a></div>
      <div class="span3 view-count"><span class="count">${ TOPIC.visit }</span><br>${ _("Views") }</div>
    </div>

    %if TOPIC.tags:
    <div class="topic-tags">
      <h3><i class="icon-tags"></i> ${ _("Tags") }</h3>
      <div class="tags">
        %for T in TOPIC.tags:
        <a class="tag" href="${ reverse_url('forum:tag:view') }?id=${ T.id }">${ T.name }</a> x <span class="hit">${ T.hit }</span><br>
        %endfor
      </div>
    </div>
    %endif

    % if ( current_user and TOPIC.user_id == current_user.id ) or has_permission('admin'):
    <p><a  class="btn" href="${ reverse_url('forum:topic:edit') }?id=${ TOPIC.id }"><i class="icon-edit"></i> ${ _("Edit") }</a></p>
##    <p><a class="btn btn-danger" href=""><i class="icon-trash"></i> ${ _("Delete") }</a></p>
    % endif

  </div>

</div>


<div class="topic-posts">
  %if POSTS:
  <div class="posts">
    %for INDEX, P in enumerate(POSTS):
    <div class="post-item row-fluid">
      <div class="span9 post-view-sidemain">

        <p class="muted">${ _("Posted at ") } ${ ftime(P.updated) } (${ htime(P.updated) })</p>

        <% PP = get_post_parent(P) %>
        % if PP:
        <div class="accordion-group">
          <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" href="#collapse-${ INDEX }">
              @ ${ PP.user.username }
            </a>
          </div>
          <div id="collapse-${ INDEX }" class="accordion-body collapse">
            <div class="accordion-inner">
              <p>
                ${ ftime(PP.updated) }
                ${ _("by ") } <a href="${ reverse_url('user:view') }?id=${ PP.user_id }">${ PP.user.username }</a>
              </p>
              ${ PP.body_html }
            </div>
          </div>
        </div>

        % endif
        <div class="body">${ P.body_html }</div>
        <div class="post-footer-actions text-right">
          <span class="vote">
            <span class="vote-opt" data-url="${ reverse_url('forum:post:vote') }?id=${ P.id }&vote=1"><img src="${ theme_url('img/like.png') }" /></span>
            <span class="like count">${ P.like }</span>
          </span>
          <span class="vote">
            <span class="vote-opt" data-url="${ reverse_url('forum:post:vote') }?id=${ P.id }&vote=-1"><img src="${ theme_url('img/unlike.png') }" /></span>
            <span class="unlike count">${ P.unlike }</span>
          </span>
          % if current_user and P.user_id == current_user.id:
          <a href="${ reverse_url('forum:post:edit') }?id=${ P.id }"><i class="icon-edit"></i> ${ _("Edit") }</a>
          % else:
          <a href="${ reverse_url('forum:post:reply') }?id=${ P.id }"><i class="icon-reply"></i> ${ _("Reply Post") }</a>
          % endif
        </div>
      </div>

      <div class="span3 post-view-sidebar">
        <div>
          ${ P.user.avatar_mini } <a href="${ reverse_url('user:view') }?id=${ P.user_id }">${ P.user.username }</a> 
        </div>

        % if has_permission('admin'):
        <p><a class="btn btn-danger" href="${ reverse_url('forum:post:edit') }?id=${ P.id }"><i class="icon-edit"></i> ${ _("Edit") }</a></p>
        % endif
      </div>

    </div>
    %endfor
    %if POST_TOTAL > 10:
    <div>${ _("Total Post: ") } ${ POST_TOTAL }, <a href="">${ _("Read More") }</a></div>
    %endif
  </div>
  %endif
</div>

<p><a name="reply-topic"></a></p>
<div class="row-fluid">
  <div class="span9">
    <div class="topic-reply-form">
      <div id="topic-reply-content" class="large-table-form c">
        % if current_user:
        <h2 class="reply"><i class="icon-reply"></i> ${ _("REPLY: ") } <a class="topic-replyed" href="${ reverse_url('forum:topic:view') }?id=${ TOPIC.id }">${ TOPIC.name }</a></h2>
        <form method="POST" action="${ reverse_url('forum:topic:reply') }?id=${ TOPIC.id }">${ xsrf_form_html() }
          <textarea id="reply-body" name="body"></textarea>
          <br>
          <button type="submit" class="btn btn-primary">${ _("Reply Topic") }</button>
        </form>
        % else:
        <p class="text-warning"><i class="icon-warning-sign"></i> ${ _("You have not login now, can not reply this topic.") } <a href="/login?next=${ request.uri }">${ _("Sign In") }</a> | <a href="/register">${ _("Register") }</a></p>
        % endif
      </div>
  </div>
  </div>
  <div class="span3">
  </div>
</div>

<div id="topic-delete-modal" class="modal hide fade">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3>${ _("Delete Topic") }</h3>
  </div>
  <div class="modal-body">
    <p>${ _("Did you want delete this topic really ?") }</p>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn" data-dismiss="modal">${ _("Cancel") }</a>
    <a href="${ reverse_url('forum:topic:delete') }?id=${ TOPIC.id }" class="btn btn-danger real-delete">${ _("Delete This Topic") }</a>
  </div>
</div>


<div style="display:none;">
  <span id="xsrf-cookie">${ xsrf_cookie }</span>
  <span id="repeat-click-string">${ _("Please do not repeat voting !") }</span>
</div>

% if markup_language == 'markdown':
<script type="text/javascript" src="${ static_url('markitup/jquery.markitup.js') }"></script>
<script type="text/javascript" src="${ static_url('markitup/sets/markdown/set.js') }"></script>
<script type="text/javascript">
   mySettings.previewParserPath = "/t/preview?markup_language=markdown&_xsrf=${ xsrf_cookie }";
   $(document).ready(function() {
      $("#reply-body").markItUp(mySettings);
   });
</script>

% else:
<script charset="utf-8" src="${ static_url('third/kindeditor/kindeditor-min.js') }"></script>
<script charset="utf-8" src="${ static_url('third/kindeditor/lang/zh_CN.js') }"></script>
<script type="text/javascript">
  load_kindeditor({ selector: '#reply-body' });
</script>
% endif


<script type="text/javascript">
  $(function () {
    forum_vote();
    forum_topic_delete();
  });
</script>

</%block>
